<template>
  <div class="body">
    <el-card>
      <!-- 学科名称 -->
      <el-form label-width="80px" ref="subjectsForm" :model="formLabelAlign">
        <el-form-item label="学科名称">
          <el-input v-model="filterState.cate_id" style="width: 20%"></el-input>
          <el-button
            size="small"
            style="margin-left: 15px"
            @click="emptySubjects"
            >清空</el-button
          >
          <el-button type="primary" size="small" @click="searchSubjects"
            >搜索</el-button
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            class="button"
            @click="addSubjects('add')"
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 数据显示条 -->
      <el-alert
        v-if="aggregate !== ''"
        :title="aggregate"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格部分 -->
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          property="id"
          type="index"
          label="序号"
          prop="id"
          width="48%"
        >
        </el-table-column>
        <el-table-column
          property="subjectName"
          label="学科名称"
          prop="subjectName"
        >
        </el-table-column>
        <el-table-column property="username" label="创建者" prop="username">
        </el-table-column>

        <el-table-column
          property="addDate"
          label="创建日期"
          prop="addDate"
          width="150%"
        >
          <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>

        <el-table-column
          property="isFrontDisplay"
          label="前台是否显示"
          prop="isFrontDisplay"
        >
        </el-table-column>
        <el-table-column
          property="twoLevelDirectory"
          label="二级目录"
          prop="twoLevelDirectory"
        >
        </el-table-column>
        <el-table-column property="tags" label="标签" prop="tags">
        </el-table-column>
        <el-table-column property="totals" label="题目数量" prop="totals">
        </el-table-column>
        <el-table-column label="操作" style="" width="240%">
          <template #default="{ row }">
            <el-button type="text" @click="subjectCatalogue(row)"
              >学科分类</el-button
            >
            <el-button type="text" @click="subjectLabel(row)"
              >学科标签
            </el-button>
            <el-button type="text" @click="revampSubjects(row)">修改</el-button>
            <el-button type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增弹出层 -->
      <el-dialog
        :title="titleInfo"
        destroy-on-close
        width="30%"
        :visible="dialogFormVisible"
        @close="popoutClose"
      >
        <el-form :model="formData" :rules="rules" ref="addForm">
          <el-form-item
            label="学科名称"
            :label-width="formLabelWidth"
            prop="subjectName"
          >
            <el-input
              v-model="formData.subjectName"
              autocomplete="off"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="是否显示"
            :label-width="formLabelWidth"
          >
          <!-- 开关 -->
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="value"
          >
          </el-switch>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->

        <div slot="footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addIncreased">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 显示分页 -->
      <el-pagination
        style="float: right; margin: 20px 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 3, 4, 10]"
        :current-page="page"
        :page-size="pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { list, add, remove, detail, update } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      tableData: [],

      aggregate: '', // 总数据条
      currentRow: null,
      dialogFormVisible: false, // 新增弹框默认为false
      total: 0, // 数据总数
      page: 0, // 页码
      pagesize: 10, // 每页条数
      subjectName: '',
      revampId: '',
      empty: '',
      filterState: {
        cate_id: '',
        state: ''
      },
      formLabelAlign: {
        name: ''
      },
      formData: {
        subjectName: '', // 学科名称
        isFrontDisplay: '' // 是否在页面显示 1是 0否
      },
      value: true,
      formLabelWidth: '25%',
      // 新增弹出层校验
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      titleInfo: ''
    }
  },
  created () {
    this.getRoles()
  },
  methods: {
    // 关闭弹出层
    popoutClose () {
      this.dialogFormVisible = false
      this.$refs.addForm.resetFields()
      this.value = true
      // this.formData.isFrontDisplay = 1
    },
    // 获取列表数据
    async getRoles () {
      const { data: res } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.formLabelAlign.name
      })
      // console.log(res)
      this.total = res.counts
      // 获取总条数
      this.tableData = res.items
      this.tableData.forEach((item) => {
        // console.log(item)
        if (item.isFrontDisplay === 0) {
          item.isFrontDisplay = '否'
        } else {
          item.isFrontDisplay = '是'
        }
        // 获取总数据条
        this.aggregate = `共${this.total}条记录`
      })
      // const err = res.items.isFrontDisplay
      // console.log(err)
      // this.fromatDtate()
    },
    // 每页显示的条数
    handleSizeChange (size) {
      console.log(size)
      this.pagesize = size
      this.page = 1
      this.getRoles()
    },
    // 当前页码值
    handleCurrentChange (newpage) {
      // console.log(newpage)
      this.page = newpage
      // this.formLabelAlign.name = ''
      this.getRoles()
    },
    // 新增学科显示弹出层
    addSubjects (id) {
      this.dialogFormVisible = true
      if (id === 'add') {
        this.titleInfo = '新增用户'
      } else {
        this.titleInfo = '修改用户'
      }
      // 修改用户后清空表单
      // this.formData.subjectName = ''
    },
    // 点击确定添加学科  新增学科
    addIncreased () {
      this.$refs.addForm.validate(async (flag) => {
        // flag 是个布尔值
        if (!flag) return
        console.log(this.formData.isFrontDisplay)
        // 有id就修改
        if (this.revampId) {
          // console.log(this.revampId)
          this.formData.isFrontDisplay = this.value ? 1 : 0

          await update({
            // 后端要的参数
            id: this.revampId,
            subjectName: this.formData.subjectName,
            isFrontDisplay: this.formData.isFrontDisplay
          })
          // console.log(res)
        } else {
          if (this.value) {
            this.formData.isFrontDisplay = 1
          } else {
            this.formData.isFrontDisplay = 0
          }
          // 发送请求  没有id就添加
          await add(this.formData)
        }
        // console.log(res)
        this.$message.success('操作成功')
        // 添加成功关闭弹框
        this.popoutClose()
        // 添加成功后重新获取列表
        this.getRoles()
      })
    },
    // 搜索功能
    searchSubjects () {
      // 在第5页输入名称  无法搜索到   this.page = 1 就可以实现
      this.page = 1
      this.formLabelAlign.name = this.filterState.cate_id
      this.getRoles()
    },
    // 搜索表单清空
    emptySubjects () {
      this.filterState = {
        cate_id: '',
        state: ''
      }
    },
    // 修改 编辑
    async revampSubjects (row) {
      // console.log(id)
      this.revampId = row.id

      if (this.revampId) {
        this.addSubjects()
        const { data } = await detail({ id: row.id })
        this.value = data.isFrontDisplay !== 0
        this.formData.subjectName = data.subjectName
      }
    },
    // 删除功能

    async del (id) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          type: 'warning'
        })
        await remove(id)
        this.$message.success('删除角色成功')
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getRoles()
      } catch (error) {}
    },
    // 跳转到目录
    subjectCatalogue (row) {
      // this.$router.push('./directorys')
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 跳转到标签
    subjectLabel (row) {
      // this.$router.push('./tags')
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
<style>
.button {
  float: right;
}
</style>
